<template>
  <div id="post-detail">
    <template>
      <!--头部 -->
      <div class="category-wrapper">
        <span>
          <router-link
            :to="`/category/${encodeURIComponent(article.category)}`"
            >{{ article.category }}</router-link
          ></span
        >
      </div>
      <!--内容 -->

      <div
        id="post-content"
        class="post-content highlight"
        itemprop="articleBody"
        ref="post-content"
      >
        <!-- 输出文章内容 -->
        <!-- v-highlight -->
        <div v-viewer v-highlight>
          <div
            v-if="article.postRenderType == 'markdown'"
            class="content_body markdown-html"
            v-html="markedContent"
          ></div>
          <div v-else class="content_body" v-html="htmlContent"></div>
        </div>
        <!-- 文章底部 -->
        <div class="show-foot">
          <div class="tag-share clearfix">
            <div class="post-tags">
              <!-- <span>归类于</span> -->
              <span
                :key="index"
                class="tag"
                v-for="(tag, index) in article.tags"
              >
                <router-link
                  :key="index"
                  :to="`/tag/${encodeURIComponent(tag.tagName)}`"
                  >{{ tag.tagName }}</router-link
                ></span
              >
            </div>
            <div class="notebook">
              <i class="fa fa-clock-o"></i>
              <span>最后修改：{{ article.updatedAt }}</span>
            </div>
          </div>

          <div class="social-main">
            <div class="like favorite">
              <q-btn
                flat
                round
                icon="favorite"
                :style="isLike ? 'color:#f44336' : 'color:#e0e0e0'"
                @click="like"
                size="16px"
              />

              <span class="count">{{ article.likes }}</span
              >人点赞
            </div>
            <!-- <div class="reward">
          <i class="fa fa-gift" aria-hidden="true"></i> 打赏
          <img
            class="reward-qrcode"
            src="https://mkblog.cn/wp-content/uploads/2018/02/2018-02-21_064917_92.png"
          />
          </div>-->
          </div>
          <!-- 版权声明 -->
          <div class="copyright">
            <div class="flex-row">
              <div class="copyright-text">版权属于：lvzhen</div>
            </div>
            <div class="flex-row">
              <div class="copyright-text">
                转载请保留本文转载地址
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        id="post_nav"
        :class="article.prev && article.next ? 'space clearfix' : 'clearfix'"
        v-if="article.prev || article.next"
      >
        <nav-item
          v-if="article.prev"
          :item="article.prev"
          :navType="'prev'"
        ></nav-item>
        <nav-item
          v-if="article.next"
          :item="article.next"
          :navType="'next'"
        ></nav-item>
      </div>

      <div class="comment">
        <comment-box
          :Fetching="isFetching"
          :commentNum="article.commentNum"
          :Root_ID="article.id"
          ModuleType="post"
        />
      </div>
      <!-- <comment
          @getComments="getComments"
          :CommentList="CommentList"
          :totalReplyNum="article.totalReplyNum"
          :UserId="userid"
          :Root_ID="Root_ID"
          :commentPage="Page"
        ></comment>
      <ShareSideBar :Article="article" @praise="praise"></ShareSideBar>-->
    </template>
    <post-directory
      :DomId="'post-content'"
      :Show="true"
      :key="article.id"
    ></post-directory>
  </div>

  <!-- <mavon-editor :toolbars="markdownOption" v-model="handbook" /> -->
</template>
<script lang="ts">
// :Ref="$refs.post-content"

import { Component, Vue } from 'vue-property-decorator';
import { Article } from 'src/models/article';
import { treeNode } from '../../models/treeNode';
// import cardItem from "../../components/article/card-item.vue";
import postDirectory from './components/directory/postDirectory.vue';
import navItem from './components/navItem.vue';
import commentBox from '../../components/comment/box.vue';
import { WebSiteName } from 'src/constants/system';

// import * as state_const from "~/constants/state.js";

// import {isLikePost,likePost} from '@/utils/state'
// let isLikePost;
// let likePost;
// if(process.client){
// //
// {isLikePost}=require('@/utils/state');
// }

@Component<ArticleDetail>({
  components: {
    // cardItem,
    postDirectory,
    commentBox,
    navItem
  },
  async preFetch({
    store,
    currentRoute,
    previousRoute,
    redirect,
    ssrContext,
    urlPath,
    publicPath
  }) {
    await store.dispatch('article/GetDetail', currentRoute.params.id);

    await store.dispatch('comment/FetchList', {
      id: currentRoute.params.id
      // type: state_const.CommentModule.blog
    });

    var articleDetail = store.state.article.detail;
    await store.dispatch('headerCover/Init', {
      visible: true,
      bgImg: articleDetail.coverImg,
      title: articleDetail.title,
      useSlot: true,
      showArrow: false,
      slotContent: `<div class='post-info'>
        <span><i class="mdi q-icon notranslate mdi-clock-outline"></i> ${articleDetail.createdAt}</span>
        <span><i class="mdi q-icon notranslate mdi-eye-check"></i>  ${articleDetail.viewNum}</span>
        <span><i class="mdi q-icon notranslate mdi-comment-processing-outline"></i>  ${articleDetail.commentNum}</span>
      </div>`
    });
  },

  meta() {
    return {
      // 这将访问data“数据”中的“title”属性;
      // 每当“title”属性更改时，您的meta将自动更新
      title: this.article.title + ' | ' + WebSiteName
    };
  },

  mounted() {
    document.querySelectorAll('pre').forEach(el => {
      if (!el.classList.contains('line-numbers')) {
        el.classList.add('line-numbers');
      }
    });
    this.$prism.highlightAll();
  },
  watch: {},
  beforeDestroy() {}
})
export default class ArticleDetail extends Vue {
  public get isFetching(): boolean {
    return this.$store.state.article.fetching;
  }
  public get article(): Article {
    let art: Article = this.$store.state.article.detail as Article;
    return art;
  }

  public get markedContent(): string {
    // return this.article.bcontent;
    // return markdownToHTML(this.article.content, {
    //   relink: true,
    //   html: true
    // });
    return '';
  }

  public get htmlContent(): string {
    // if(this.article.content) return  this.article.content.replaceAll("<br/>","\n");
    // else return "";
    return this.article.content;
  }

  public get defaultImg(): string {
    return this.$store.state.global.defaultImg;
  }

  get isLike(): boolean {
    const likeHistory = this.$store.state.article.likeHistory;
    if (likeHistory) return likeHistory.includes(this.article.id);
    return false;
  }
  public async like() {
    if (this.isLike) {
      this.$q.notify({
        type: 'positive',
        message: `点过了就别取消了`,
        position: 'bottom'
      });
      return;
    }
    const res = await this.$store.dispatch('article/Like', this.article.id);
    if (res) {
      this.article.likes = res;
    }
  }
}
</script>

<style lang="scss" scoped>
.mavonEditor {
  width: 100%;
  height: 100%;
}
.main-content {
  margin: 0 auto;
}

#post-detail {
  background: var(--card-bg);
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  // overflow-x: hidden;
  // overflow-y: visible;

  // // transform: translateY(-150px);//与遮罩冲突
  // margin-top: -150px;
  border-radius: 15px;
  // box-shadow: 0 13px 15px rgba(31, 45, 61, 0.3);
  box-shadow: rgba(31, 45, 61, 0.3) 0px 0px 10px;
  //   background: $body-bg;
  .category-wrapper {
    position: absolute;
    top: 20px;
    left: 0px;
    margin-left: -12px;
    padding: 2px 10px 2px 12px;
    border-radius: 3px 5px 5px 0;
    background: linear-gradient(to right, #ec008c, #fc6767);
    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 0;
      height: 0;
      border: 0 solid transparent;
      border-top-color: #fc6767;
      border-width: 9px 0 0 11px;
    }
    span {
      // padding: 8px 10px 8px 8px;
      // // border-radius: 0 100px 100px 0;
      // background: linear-gradient(to right, #ec008c, #fc6767);
      // box-shadow: 2px 4px 8px rgba(225, 0, 233, 0.2);
      a {
        font-size: 12px;
        color: white;
      }
    }
  }
  .post-content {
    margin: 0 auto;
    padding-top: 60px;
    max-width: 90%;
    overflow: hidden;
    ::v-deep img {
      max-width: 100%;
      object-fit: cover;
      position: relative;
      height: auto;
      margin: 20px auto;
      display: block;
      box-shadow: 0 0 30px #ababab;
    }
  }

  #post_nav {
    line-height: 1.8;
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    &.space {
      justify-content: space-between;
    }
    ::v-deep .post-item {
      width: calc(100% / 2 - 60px);
    }
    .prev-wrapper,
    .next-wrapper,
    .nav-wrapper {
      float: left;
      width: 45%;
      height: 16px;
      box-shadow: 0 2px 1rem 0 rgba(0, 0, 0, 0.2);
      position: relative;
      height: 120px;
      border-radius: 5px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
      position: relative;
      margin: 2%;
      transition: 0.5s;
      background: black;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.7;
      }
    }
    .nav-wrapper {
      .title {
        position: absolute;
        bottom: 0px;
        padding: 20px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        // background: linear-gradient(
        //   to bottom,
        //   rgba(0, 0, 0, 0.1),
        //   rgba(0, 0, 0, 0.1)
        // );
        > h3 {
          color: $module-bg;
        }
      }
      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }
}
@media (max-width: 880px) {
  .prev-wrapper {
    width: 95%;
  }
  .next-wrapper {
    width: 95%;
  }
  .nav-wrapper.nav.none {
    width: 95%;
  }
}

@media (max-width: 650px) {
  #post_nav {
    ::v-deep .post-item {
      flex-basis: 100%;
    }
  }
}
.social-main {
  user-select: none;
  // border-top: 0.06em solid #eee;
  // border-bottom: 0.06em solid #eee;
  padding: 1em 0.2em;
  margin: 0.6em 0;
  text-align: center;
  transition: 0.4s;

  opacity: 1;

  div {
    display: inline-block;
    margin-right: 1em;
    padding-left: 2.4em;
    position: relative;
    cursor: pointer;
  }
  .social-main > div:last-child {
    margin-right: 0;
  }
}

.tip {
  background: #eef6fd;
  padding: 8px 20px;
  border-left: 3px solid #38a3fd;
  border-radius: 0 5px 5px 0;
  margin-bottom: 10px;
}
.tip.error {
  border-left-color: #ed0000;
  background: #fcf1f1;
}
.tip.inlineBlock {
  display: inline-block;
  width: 100%;
  line-height: 1.8;
}

.tip:before {
  background: #38a3fd;
  border-radius: 50%;
  color: #fff;
  content: 'i';
  font-family: Dosis, 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  height: 21px;
  line-height: 21px;
  margin-left: -32px;
  margin-top: 5px;
  position: absolute;
  text-align: center;
  width: 21px;
}
.tip.error:before {
  background: #ed0000;
  content: '×';
}

.show-foot {
  margin: 40px 0 30px;
  .tag-share {
    margin: 10px 0;
    padding: 20px 0px;
    border-bottom: 1px solid whitesmoke;
    .post-tags {
      float: left;
      margin: 10px 0;
    }
    .notebook {
      padding: 10px 0;
      float: right;
    }
    .tag {
      border-radius: 50rem !important;
      color: #25b864;
      display: inline-block;
      padding: 0.35em 0.65em;
      font-size: 0.75em;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      text-decoration: none;
      margin: 0 2px;
      border: 1.5px solid;
      transition: 0.4s;
      &:hover {
        box-shadow: 0 0 10px 0 #c7c7c7;
      }
      a {
        color: #25b864;
      }
    }
  }
  .notebook {
    font-size: 1rem;
    display: inline;
    color: #9b9b9b;
  }
  .copyright {
    background-color: rgb(248, 248, 248);
    line-height: 1.5rem;
    border-radius: 5px;
    padding: 1rem;
    border-left: 5px solid rgb(45, 140, 240);
    .flex-row {
      font-size: 12px;
    }
  }
}

@media screen and (max-width: 700px) {
  .show-foot {
    .tag-share {
      .post-tags {
        float: none;
      }
      .notebook {
        float: none;
      }
    }
  }
}
</style>
<style lang="scss">
.subtile-wrapper {
  color: $module-bg;
  > li {
    list-style: none;
    display: inline;
    margin-right: 5px;
    color: $module-bg;
  }
}

.post-content {
  .content_body {
    blockquote {
      margin: 20px 0;
      font-size: 15px;
      padding: 0 10px 0 20px;
      border-left: 4px solid #ddd;
    }
    code {
      padding: 16px 30px 20px;
      font-size: 14px;
      line-height: 22px;
      border-radius: 5px;
    }
    p {
      font-size: 15px;
      text-indent: 2em;
      margin-bottom: 1rem;
      a {
        color: green;
        text-decoration: underline;
      }
      img {
        position: relative;
        display: block;
        overflow: hidden;
        max-width: 100%;
        height: auto;
        margin: 20px auto;
        cursor: zoom-in;
      }
    }
    ul,
    ol {
      margin-bottom: 1em;
      margin-left: 3em;
      list-style: decimal;
    }

    @for $i from 1 through 6 {
      h#{$i} {
        margin: (1- (0.1 * $i)) * 1rem;
        text-indent: 0;
        // padding-left: $i * 0.2rem;
        position: relative;
        color: black;
        font-size: (1- (0.1 * $i)) * 2rem;
        font-weight: 700;
        // &:before {
        //   position: absolute;
        //   left: -(1- (0.1 * $i)) * 1rem;
        //   font-weight: 600;
        //   display: block;
        //   content: "#";
        //   color: #eb5055;
        // }
      }
    }

    pre {
      // margin: 1.5rem 0;

      ul,
      ol {
        display: block;
        margin-left: 0px;
        list-style: none;
        border-right: 1px solid var(--text-white);
      }
    }
  }
}
</style>

<style lang="scss">
.post-info {
  color: white;
  span {
    display: inline-block;
    margin: 0 10px;
  }
}
</style>
